<template>
	<view>
		
		<view class="home">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="homeImg homeImg1"></view>
				</swiper-item>
				<swiper-item>
					<view class="homeImg homeImg2"></view>
				</swiper-item>
			</swiper>
			
			<!-- 1.nav开始 -->
			<view class="bigBox">
				<view v-for="(item,index) in msg" :key="index" class="elseMsg elseMsgWidth" @click="grade(index)">
					<view class="img" :class="im[index]"></view>
					<text>{{msg[index]}}</text>
				</view>
			</view>
			<!-- nav结束 -->
			
			<!-- 2.校园论坛开始 -->
			<view class="bigBox">
				<view class="title">
					<text class="boxTitle">校园论坛</text>
					<text class="more">更多</text>
				</view>
				<view class="lunRight">
					<view v-for="(item,index) in msg2" :key="index" class="elseMsg elseMsgWidth2">
						<view class="img" :class="im2[index]"></view>
						<text>{{msg2[index]}}</text>
					</view>
				</view>
			</view>
			<!-- 校园论坛结束 -->
			
			<!-- 3.最新公告开始 -->
			<view class="bigBox">
				<view class="title">
					<text class="boxTitle">最新公告</text>
					<text class="more">更多</text>
				</view>
				<view class="newImg"></view>
				<view class="newBox">
					<view class="order-item" v-for="(item,index) in news" :key="item.id" :data-index="index"
					@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'">
						<view class="newTitle" @click="newsDetails(item)" >{{item.title}}</view>
						<view class="newText" @click="newsDetails(item)" >{{item.text}}</view>
						<view class="remove" @click="delData(item)">删 除</view>
					</view>
				</view>
			</view>
			<!-- 最新公告结束 -->
			
			<!-- 4.学校新闻开始 -->
			<view class="bigBox">
				<view class="title">
					<text class="boxTitle">学校新闻</text>
					<text class="more">更多</text>
				</view>
				<view class="newBox">
					<view class="wen" v-for="(item,index) in schoolNews" :key="index">
						<view class="wenImg" :class="im3[index]"></view>
						<view class="wenRight">
							<view class="newTitle">{{item.title}}</view>
							<view class="newText">{{item.text}} </view>
							<view class="icons">
								<view class="smallIcon">
									<text class="wenIcon dianzan"></text>
									<text class="nine">999+</text>
								</view>
								<view class="smallIcon">
									<text class="wenIcon pinglun"></text>
									<text class="nine">999+</text>
								</view>
								<view class="smallIcon">
									<text class="wenIcon fenxiang"></text>
									<text class="nine">999+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 学校新闻结束 -->
		</view>
	</view>
</template>

<script>
	const {getNews,getSchoolNews} = require('../../utils/api.js')
	const {deleteNews} = require('../../utils/admin.js')
	export default {
		name: "IndexHeader",
		data() {
			return {
				//左滑默认宽度
				delBtnWidth: 160,
				background: ['color1', 'color2'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				im:["img1","img2","img3","img4"],
				im2:["img5","img6","img7","img8"],
				im3:["img9","img10","img11"],
				msg:["缴费","选课","成绩","发布公告"],
				msg2:["2020年插画比赛作品展示","校园摄影大赛作品展示","3D建模比赛作品展示","校园艺术展"],
				news:[],
				schoolNews:[]
			}
		},
		mounted() {
			this.getNews();
			this.getSchoolNews();
			uni.$on('storage_news',(data)=>{
				this.news = data.data;
			})
		},
		methods:{
			//开始触摸滑动
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				for (var index in this.news) {
					this.$set(this.news[index],'right',0);
				}
				var touch = e.touches[0];
				var item = this.news[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
				this.$set(this.news[e.currentTarget.dataset.index],'right',disX);
				} else {
					this.$set(this.news[e.currentTarget.dataset.index],'right',0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.news[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.news[e.currentTarget.dataset.index],'right',this.delBtnWidth);
				} else {
					this.$set(this.news[e.currentTarget.dataset.index],'right',0);
				}
			},
			//删除方法
			delData(item){
				if(uni.getStorageSync('identity') === 'teacher'){
					uni.showModal({
					    title: '提示',
					    content: "确认删除该公告？",
						success: (res)=> {
							if (res.confirm) {
								deleteNews(item).then(data=>{
									uni.showToast({
										title: data.msg,
										duration: 2000
									});
									this.news = data.data;
								})
								
							} else if (res.cancel) {
								uni.showToast({
									title: '您已取消删除',
									duration: 2000
								});
							}
						},
					});
				}else{
					uni.showToast({
						title: '您没有权限',
						duration: 2000
					});
				}
			},
			newsDetails(item){
				uni.setStorageSync('item',item);
				uni.navigateTo({
					url: 'updateNews'
				});
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			getNews(){
				getNews().then(data=>{
					this.news = data.data
				})
			},
			getSchoolNews(){
				getSchoolNews().then(data=>{
					this.schoolNews = data.data
				})
			},
			grade(index){
				if(index === 0 ){
					uni.navigateTo({
						url: '../pay/index'
					});
				}else if(index === 1){
					uni.navigateTo({
						url: 'timetable'
					});
				}else if(index === 2){
					uni.navigateTo({
						url: '../grade/index'
					});
				}else if(index === 3){
					if(uni.getStorageSync('identity') === 'teacher'){
						uni.navigateTo({
							url: 'addNews'
						});
					}else{
						uni.showToast({
							title: '您没有权限',
							duration: 2000
						});
					}
				}
			}
		}
	}
</script>

<style scoped src="../../static/css/home.css"></style>
<style scoped>
	.swiper{
		margin-bottom: 10px;
	}
	.order-item {
		width: 100%;
		position: relative;
		border-bottom: 1px solid #F0F0F0;
		margin-bottom:5px;
	}
	
	.remove {
		width: 80px;
		height: 100%;
		background-color: red;
		color: white;
		position: absolute;
		top: 0;
		right: -160px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
</style>

